<template>
  <div style="position:relative">
    <div class="issue-img-block">
      <div>
          <span v-for="(item,index) in srcData" :key="index" class="issue-img" >
              <img class="img-data" :src="item.urlData" @click="previewImg(index)"/>
              <img class="img-close" src="../assets/close.png" @click="closeImg(index)"/>
          </span>
        <img class="issue-img" src="../assets/addImg.png"  @click="addImg()"/>
        <input id="upload_file" type="file" class="file-input" accept="image/*" multiple @change="inputChange" style="display: none" />
      </div>
    </div>
    <div v-if="isPreview" class="preview-img-block" @click="isPreview=false">
      <mt-swipe :auto="0" :defaultIndex="defaultIndex">
        <mt-swipe-item v-for="(item, index) in srcData" :key="index">
          <div class="img-swipe-item">
            <img class="preview-img" :src="item.urlData"/>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>
<script>
import request from '@/uitls/request'
export default {
  data () {
    return {
      isPreview: false,
      srcData: [],
      submitFormData: null,
      fileReader: null
    }
  },
  props: {
    action: '' // 上传地址
  },
  mounted () {
    if (!window.FileReader) {
      console.error('Your browser does not support FileReader API!')
    }
    this.fileReader = new FileReader() // FileReader 对象
    this.submitFormData = new window.FormData() // FormData 对象
  },
  methods: {
    previewImg (index) {
      console.log('11')
      this.isPreview = true
      this.defaultIndex = index
    },
    closeImg (index) {
      this.srcData.splice(index, 1)
    },
    addImg () {
      document.getElementById('upload_file').click()
    },
    inputChange (e) { // input 值发生变化时调用
      const files = e.target.files
      this.recursion(files, 0)
    },
    recursion (files, index) { // 递归多文件
      this.fileReader.readAsDataURL(files[index]) // 将文件读取成 DataURL
      this.fileReader.onload = () => { // 读取文件为 dataURL 完成后调用
        this.srcData.push({urlData: this.fileReader.result, file: files[index]})
        if (index < files.length - 1) {
          this.recursion(files, index + 1)
        }
      }
    },
    submitData () { // 提交数据
      this.$indicator.open({
        spinnerType: 'fading-circle'
      })
      for (let i = 0; i < this.srcData.length; i++) {
        this.submitFormData.append('attach_list', this.srcData[i].file)
      }
      request({
        method: 'post',
        url: '/feedback/add',
        data: this.submitFormData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => { // 成功后清空数据
        this.$toast('提交成功！')
        this.$indicator.close()
        this.srcData = []
        this.submitFormData = new window.FormData() // 重新new 对象，清空作用
      }).catch((res) => {
        this.$indicator.close()
        this.submitFormData = new window.FormData()
        this.$toast('服务出错了...')
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .issue-img-block{
    padding-bottom: 10px;
    background-color: white;
  }
  .issue-img{
    width: 29%;
    height: 100px;
    margin: 3% 0 0 6px;
    position: relative;
  }

  .issue-img .img-data{
    width: 29%;
    height: 100px;
  }
  .issue-img .img-close{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 3px;
    top: -90px;
  }
  .preview-img{
    width: 100%;
    height:auto;
  }
  .preview-img-block {
    height: 100vh;
    width: 100vw;
    background-color: black;
    position: fixed;
    top: 0;
    z-index: 1000;
  }
  .img-swipe-item{
    height: 100vh;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
</style>
